<template>
	<view class="container">
		<!-- 头部积分信息卡片 -->
		<view class="points-header">
			<view class="points-card">
				<view class="points-title">我的积分</view>
				<view class="points-value">{{ userPoints.points || 0 }}</view>
				<view class="member-info">
					<view class="member-level">{{ getMemberLevelText(userPoints.memberLevel) }}</view>
					<view class="growth-value">成长值: {{ userPoints.growthValue || 0 }}</view>
				</view>
				<view class="points-tips">每消费1元可获得1积分</view>
			</view>
		</view>

		<!-- 标签页切换 -->
		<view class="tabs">
			<view class="tab-item" :class="{ active: activeTab === 'history' }" @click="switchTab('history')">
				<text>积分明细</text>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'rules' }" @click="switchTab('rules')">
				<text>积分规则</text>
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content">
			<!-- 积分明细 -->
			<view v-if="activeTab === 'history'" class="history-list">
				<view v-if="loading" class="loading">
					<view class="loading-spinner"></view>
					<text>加载中...</text>
				</view>
				<block v-else>
					<!-- 积分记录列表 -->
					<view v-if="pointsHistory.length > 0" class="history-container">
						<view v-for="(item, index) in pointsHistory" :key="index" class="history-item">
							<view class="history-info">
								<view class="history-title">{{ item.description }}</view>
								<view class="history-time">{{ formatDate(item.createdAt) }}</view>
							</view>
							<view class="history-points" :class="{ 'points-add': item.changeType === 1, 'points-reduce': item.changeType === 2 }">
								{{ item.changeType === 1 ? '+' : '-' }}{{ item.points }}
							</view>
						</view>
						
						<!-- 加载更多 -->
						<view v-if="hasMore" class="load-more" @click="loadMoreHistory">
							<text>加载更多</text>
						</view>
						<view v-else class="no-more">
							<text>没有更多记录了</text>
						</view>
					</view>
					
					<!-- 空状态 -->
					<view v-else class="empty-state">
						<image class="empty-image" src="/static/images/empty.png" mode="aspectFit"></image>
						<text class="empty-text">暂无积分记录</text>
					</view>
				</block>
			</view>
			
			<!-- 积分规则 -->
			<view v-else-if="activeTab === 'rules'" class="rules-container">
				<view class="rule-section">
					<view class="rule-title">积分获取</view>
					<view class="rule-item">
						<text class="rule-dot">•</text>
						<text class="rule-text">消费1元获得1积分</text>
					</view>
					<view class="rule-item">
						<text class="rule-dot">•</text>
						<text class="rule-text">首次注册赠送10积分</text>
					</view>
					<view class="rule-item">
						<text class="rule-dot">•</text>
						<text class="rule-text">每日签到获得2积分</text>
					</view>
					<view class="rule-item">
						<text class="rule-dot">•</text>
						<text class="rule-text">评价订单获得5积分</text>
					</view>
				</view>
				
				<view class="rule-section">
					<view class="rule-title">积分使用</view>
					<view class="rule-item">
						<text class="rule-dot">•</text>
						<text class="rule-text">100积分可兑换1元优惠券</text>
					</view>
					<view class="rule-item">
						<text class="rule-dot">•</text>
						<text class="rule-text">积分可在积分商城兑换商品</text>
					</view>
					<view class="rule-item">
						<text class="rule-dot">•</text>
						<text class="rule-text">积分抵扣以具体活动为准</text>
					</view>
				</view>
				
				<view class="rule-section">
					<view class="rule-title">会员等级</view>
					<view class="rule-item">
						<text class="rule-dot">•</text>
						<text class="rule-text">普通会员：0-499成长值</text>
					</view>
					<view class="rule-item">
						<text class="rule-dot">•</text>
						<text class="rule-text">银卡会员：500-999成长值，订单享95折</text>
					</view>
					<view class="rule-item">
						<text class="rule-dot">•</text>
						<text class="rule-text">金卡会员：1000-1999成长值，订单享9折</text>
					</view>
					<view class="rule-item">
						<text class="rule-dot">•</text>
						<text class="rule-text">钻石会员：2000成长值以上，订单享85折</text>
					</view>
				</view>
				
				<view class="rule-section">
					<view class="rule-title">其他说明</view>
					<view class="rule-item">
						<text class="rule-dot">•</text>
						<text class="rule-text">积分有效期为一年</text>
					</view>
					<view class="rule-item">
						<text class="rule-dot">•</text>
						<text class="rule-text">成长值永久有效，不会过期</text>
					</view>
					<view class="rule-item">
						<text class="rule-dot">•</text>
						<text class="rule-text">最终解释权归平台所有</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { userApi } from '@/api/index.js';
import common from '@/utils/common.js';

// 响应式数据
const userPoints = ref({
	points: 0,
	growthValue: 0,
	memberLevel: 1
});
const pointsHistory = ref([]);
const activeTab = ref('history');
const loading = ref(false);
const currentPage = ref(1);
const pageSize = ref(10);
const hasMore = ref(true);

// 初始化
onMounted(() => {
	loadUserPoints();
	loadPointsHistory();
});

// 加载用户积分信息
const loadUserPoints = async () => {
	try {
		const res = await userApi.getUserPoints();
		if (res.code === 200 && res.data) {
			userPoints.value = res.data;
		} else {
			console.warn('获取用户积分失败:', res.msg);
		}
	} catch (error) {
		console.error('获取用户积分出错:', error);
	}
};

// 加载积分历史
const loadPointsHistory = async () => {
	loading.value = true;
	try {
		const res = await userApi.getPointsHistory({
			page: currentPage.value,
			pageSize: pageSize.value
		});
		
		if (res.code === 200) {
			if (currentPage.value === 1) {
				pointsHistory.value = res.data.items || [];
			} else {
				pointsHistory.value = [...pointsHistory.value, ...(res.data.items || [])];
			}
			
			// 判断是否有更多数据
			hasMore.value = pointsHistory.value.length < res.data.total;
		} else {
			common.showToast(res.msg || '获取积分历史失败');
		}
	} catch (error) {
		console.error('获取积分历史出错:', error);
		common.showToast('获取积分历史失败，请检查网络');
	} finally {
		loading.value = false;
	}
};

// 加载更多历史记录
const loadMoreHistory = () => {
	if (loading.value || !hasMore.value) return;
	currentPage.value++;
	loadPointsHistory();
};

// 切换标签页
const switchTab = (tab) => {
	activeTab.value = tab;
};

// 格式化日期
const formatDate = (dateStr) => {
	if (!dateStr) return '';
	
	// 为了兼容iOS，将日期字符串转换为标准格式
	try {
		// 解析日期字符串
		const parts = dateStr.split(/[- :T.]/);
		if (parts.length >= 3) {
			// 使用 yyyy/MM/dd 格式创建日期，这种格式iOS兼容性更好
			const year = parts[0];
			const month = parts[1].padStart(2, '0');
			const day = parts[2].padStart(2, '0');
			
			// 添加时间部分（如果有）
			let timeStr = '';
			if (parts.length >= 6) {
				const hour = parts[3] || '00';
				const minute = parts[4] || '00';
				timeStr = ` ${hour}:${minute}`;
			}
			
			// 使用iOS兼容的日期格式创建日期对象
			const date = new Date(`${year}/${month}/${day}${timeStr}`);
			
			// 检查日期是否有效
			if (isNaN(date.getTime())) {
				return dateStr;
			}
			
			// 格式化为易读格式
			return `${year}-${month}-${day}${timeStr}`;
		}
	} catch (e) {
		console.error('日期格式化错误:', e);
	}
	
	return dateStr;
};

// 获取会员等级文本
const getMemberLevelText = (level) => {
	switch (level) {
		case 1:
			return '普通会员';
		case 2:
			return '银卡会员';
		case 3:
			return '金卡会员';
		case 4:
			return '钻石会员';
		default:
			return '普通会员';
	}
};
</script>

<style scoped>
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
}

/* 头部积分卡片 */
.points-header {
	padding: 30rpx 20rpx;
}

.points-card {
	background: linear-gradient(135deg, #FF6700 0%, #FF9500 100%);
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	color: #fff;
	box-shadow: 0 4rpx 20rpx rgba(255, 103, 0, 0.2);
}

.points-title {
	font-size: 28rpx;
	margin-bottom: 20rpx;
}

.points-value {
	font-size: 60rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
}

.member-info {
	display: flex;
	align-items: center;
	margin-bottom: 10rpx;
}

.member-level {
	background-color: rgba(255, 255, 255, 0.2);
	padding: 4rpx 16rpx;
	border-radius: 30rpx;
	font-size: 24rpx;
	margin-right: 20rpx;
}

.growth-value {
	font-size: 24rpx;
	opacity: 0.8;
}

.points-tips {
	font-size: 24rpx;
	opacity: 0.7;
	margin-top: 20rpx;
}

/* 标签页 */
.tabs {
	display: flex;
	background-color: #fff;
	padding: 0 20rpx;
}

.tab-item {
	flex: 1;
	text-align: center;
	padding: 25rpx 0;
	position: relative;
	font-size: 28rpx;
	color: #666;
}

.tab-item.active {
	color: #FF6700;
	font-weight: bold;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 4rpx;
	background-color: #FF6700;
	border-radius: 2rpx;
}

/* 内容区域 */
.content {
	padding: 20rpx;
}

/* 积分历史 */
.history-container {
	background-color: #fff;
	border-radius: 16rpx;
	overflow: hidden;
}

.history-item {
	display: flex;
	justify-content: space-between;
	padding: 30rpx 20rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.history-item:last-child {
	border-bottom: none;
}

.history-info {
	flex: 1;
}

.history-title {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 10rpx;
}

.history-time {
	font-size: 24rpx;
	color: #999;
}

.history-points {
	font-size: 32rpx;
	font-weight: bold;
}

.points-add {
	color: #FF6700;
}

.points-reduce {
	color: #999;
}

/* 加载状态 */
.loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40rpx 0;
}

.loading-spinner {
	width: 40rpx;
	height: 40rpx;
	border: 4rpx solid #f3f3f3;
	border-top: 4rpx solid #FF6700;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-bottom: 10rpx;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.load-more, .no-more {
	text-align: center;
	padding: 20rpx 0;
	font-size: 24rpx;
	color: #999;
}

.load-more {
	color: #FF6700;
}

/* 空状态 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
}

.empty-image {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 30rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}

/* 积分规则 */
.rules-container {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 20rpx;
}

.rule-section {
	margin-bottom: 30rpx;
}

.rule-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 15rpx;
	position: relative;
	padding-left: 20rpx;
}

.rule-title::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 6rpx;
	height: 30rpx;
	background-color: #FF6700;
	border-radius: 3rpx;
}

.rule-item {
	display: flex;
	margin-bottom: 10rpx;
	padding-left: 20rpx;
}

.rule-dot {
	color: #FF6700;
	margin-right: 10rpx;
}

.rule-text {
	font-size: 26rpx;
	color: #666;
	line-height: 1.6;
}
</style> 